漂浮广告是什么？漂浮广告如何设置

头像
已注销
    阅读 5 分钟

    在上一篇文章中甲爪联盟有简短的提到了漂浮广告！漂浮广告在广告联盟中网站主和目前互联网网页广告运营的比较多，并且从效果来看漂浮广告也是非常不错的！但是个可能个别的站长对漂浮广告了解不够深，或者不知道怎么设置漂浮广告！所以甲爪联盟就对漂浮广告是什么？漂浮广告如何设置做出详细的解答！

    漂浮广告（ Floating Advertising）是指漂浮在网站首页或各版块、帖子等页面的漂移形式的广告。可以是图片，可以是flash。首页和各版块帖子页面都可以是独立的广告位。可以自动适应屏幕分辨率，，不被任何网页元素遮挡，同时可以支持多个图片漂浮。漂浮式广告就象永不消失的幽灵，在浏览网页的时候，它会一直沿着设计好的路线漂移，设计路线不好的漂浮式广告会分散网民的注意力，影响正常的浏览所以漂浮广告在设置的时候也需根据实况来调整用户体验！

    而漂浮广告如何设置呢？其实网页漂浮广告，悬停广告等广告样式在网上也有很多漂浮广告实现代码代码！所以甲爪广告联盟就列举三种漂浮广告样式！

    第一种 漂浮广告 不符合W3C
    JavaScript漂浮广告代码，很不错，代码精简，不过一次只有漂一个

    <html> 
<head> 
<title>漂浮广告</title> 
<body> 
<div id="codefans_net" style="position:absolute"> 
<!--链接地址--><a href="#" target="_blank"> 
<!--图片地址--><img src="/images/logo.gif" border="0"> 
</a> 
</div> 
<script> 
var x = 50,y = 60 
var xin = true, yin = true 
var step = 1 
var delay = 10 
var obj=document.getElementById("codefans_net") 
function float() { 
var L=T=0 
var R= document.body.clientWidth-obj.offsetWidth 
var B = document.body.clientHeight-obj.offsetHeight 
obj.style.left = x + document.body.scrollLeft 
obj.style.top = y + document.body.scrollTop 
x = x + step*(xin?1:-1) 
if (x < L) { xin = true; x = L} 
if (x > R){ xin = false; x = R} 
y = y + step*(yin?1:-1) 
if (y < T) { yin = true; y = T } 
if (y > B) { yin = false; y = B } 
} 
var itl= setInterval("float()", delay) 
obj.onmouseover=function(){clearInterval(itl)} 
obj.onmouseout=function(){itl=setInterval("float()", delay)} 
</script> 
</body> 
</html>

    第二种 漂浮广告 不符合标准
    Js漂浮广告代码，比较经典的浮动广告，到现还很实用，比较适合站长，这种代码是必备的。

    <html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>漂浮广告</title> 
</head> 
<body> 
<DIV id=img1 style="Z-INDEX: 100; LEFT: 2px; WIDTH: 59px; POSITION: absolute; TOP: 43px; HEIGHT: 61px; 
visibility: visible;"><a href="http://www.jiazhua.com" target="_blank"><img src="/images/logo.gif" width="80" height="80" border="0"></a></DIV> 
<SCRIPT> 
var xPos = 300; 
var yPos = 200; 
var step = 1; 
var delay = 30; 
var height = 0; 
var Hoffset = 0; 
var Woffset = 0; 
var yon = 0; 
var xon = 0; 
var pause = true; 
var interval; 
img1.style.top = yPos; 
function changePos() 
{ 
width = document.body.clientWidth; 
height = document.body.clientHeight; 
Hoffset = img1.offsetHeight; 
Woffset = img1.offsetWidth; 
img1.style.left = xPos + document.body.scrollLeft; 
img1.style.top = yPos + document.body.scrollTop; 
if (yon) 
{yPos = yPos + step;} 
else 
{yPos = yPos - step;} 
if (yPos < 0) 
{yon = 1;yPos = 0;} 
if (yPos >= (height - Hoffset)) 
{yon = 0;yPos = (height - Hoffset);} 
if (xon) 
{xPos = xPos + step;} 
else 
{xPos = xPos - step;} 
if (xPos < 0) 
{xon = 1;xPos = 0;} 
if (xPos >= (width - Woffset)) 
{xon = 0;xPos = (width - Woffset); } 
} 

function start() 
{ 
img1.visibility = "visible"; 
interval = setInterval('changePos()', delay); 
} 
function pause_resume() 
{ 
if(pause) 
{ 
clearInterval(interval); 
pause = false;} 
else 
{ 
interval = setInterval('changePos()',delay); 
pause = true; 
} 
} 
start(); 
</SCRIPT> 
</body> 
</html>

    第三种 符合W3C的漂浮广告代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>符合W3C的漂浮广告代码-甲爪广告联盟</title> 
</head> 
<body> 
<script> 
document.write ("<DIV id=img1 style='Z-INDEX: 100; LEFT: 2px; WIDTH: 252px; POSITION: absolute; TOP: 43px; HEIGHT: 172px; ") 
document.write (" visibility: visible;'> ") 
document.write (" <a href='http://s.jb51.net' target='_blank'> ") 
document.write (" <img src='/upload/201204/20120411210123566.gif'style=border:none;/> ") 
document.write (" </a></DIV> ") 
var xPos = 300; 
var yPos = 200; 
var step = 1; 
var delay = 8; 
var height = 0; 
var Hoffset = 0; 
var Woffset = 0; 
var yon = 0; 
var xon = 0; 
var pause = true; 
var interval; 
img1.style.top = yPos; 
function changePos() 
{ 
width = document.documentElement.clientWidth; 
height = document.documentElement.clientHeight; 
Hoffset = img1.offsetHeight; 
Woffset = img1.offsetWidth; 
img1.style.left = xPos + document.documentElement.scrollLeft; 
img1.style.top = yPos + document.documentElement.scrollTop; 
if (yon) 
{yPos = yPos + step;} 
else 
{yPos = yPos - step;} 
if (yPos < 0) 
{yon = 1;yPos = 0;} 
if (yPos >= (height - Hoffset)) 
{yon = 0;yPos = (height - Hoffset);} 
if (xon) 
{xPos = xPos + step;} 
else 
{xPos = xPos - step;} 
if (xPos < 0) 
{xon = 1;xPos = 0;} 
if (xPos >= (width - Woffset)) 
{xon = 0;xPos = (width - Woffset); } 
} 
function start() 
{ 
img1.visibility = "visible"; 
interval = setInterval('changePos()', delay); 
} 
function pause_resume() 
{ 
if(pause) 
{ 
clearInterval(interval); 
pause = false;} 
else 
{ 
interval = setInterval('changePos()',delay); 
pause = true; 
} 
} 
start(); 
</script> 
</body> 
</html>

    Ps：以上代码如果在尝试的时候！需要事先了解是否可行！

    广告phpjavascript
    已注销
    87 声望4 粉丝
    下一篇 »
    日志分析之识别真假蜘蛛与处理办法

    引用和评论

    推荐阅读
    头像
    2017年前端流行的数百个javascript库，你会几个？

    已注销赞 3阅读 4.4k

    头像
    如何实现一个楼中楼的评论系统

    小蚊酱赞 22阅读 10k

    头像
    腾讯新闻中心首页改版啦

    小蚊酱赞 11阅读 8.7k评论 7

    头像
    前端如何入门 Go 语言

    robin赞 25阅读 7.2k评论 8

    头像
    前端开发工具

    寒青赞 15阅读 4.2k

    头像
    100个React最佳实践小技巧

    夕水赞 13阅读 1.4k评论 3

    头像
    开发插件集合

    寒青赞 11阅读 2.9k

    0 条评论
    得票最新